<template>
  <div v-loading="dialogVisiblePayLoading">
    <div class="area-header" style="height: auto;">
      <span class="area-header-title">{{ actTitle }}</span>
    </div>
    <el-form ref="form" :model="form" :rules="rules" style="position: unset;">
      <el-row>
        <el-table tooltip-effect="darkTable" :data="form.types" border class="nowrapTable formTable">
          <el-table-column :label="$t('费用类型')" align="center">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('费用类型') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'types.' + scope.$index + '.typeArray'" :rules="typesRules.typeArray">
                <el-cascader
                  v-model="scope.row.typeArray"
                  filterable
                  :options="getFdSubjectList"
                  clearable
                  disabled
                  @change="payTypeChange(scope.$index)"
                >
                  <template slot-scope="{ node, data }">
                    <span>{{ $t(data.label) }}</span>
                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                  </template>
                </el-cascader>

              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('关联业务数据')" align="center">
            <template slot="header" slot-scope="{}">
              <span class="content" style="text-align: center;">
                <el-tooltip placement="right" :enterable="false" :content="$t('费用类型是项目投资，或者基金运营时选择')">
                  <span class="tipText" type="text">
                    {{ $t('关联业务数据') }}
                    <i class="el-icon-question" />
                  </span>
                </el-tooltip>
              </span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                v-if="scope.row.subjectType === 'deal' || scope.row.subjectType === 'fund'"
                :prop="'types.' + scope.$index + '.businessId'"
                :rules="typesRules.businessId"
              >
                <MainBodySelect v-model="scope.row.businessId" :show-label="false" :parameters="scope.row.subjectType" disabled />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('实际付款时间')" align="center">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('实际付款时间') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'types.' + scope.$index + '.actualPaymentTime'" :rules="typesRules.actualPaymentTime">
                <DatePicker
                  v-model="scope.row.actualPaymentTime"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  :placeholder="$t('实际付款时间')"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column v-if="type === 'oa_payment'" :label="$t('实际付款金额(元)')" align="center">
            <template v-if="type === 'oa_payment'" slot="header" slot-scope="{}">
              <span>{{ $t('实际付款金额(元)') }}</span>
            </template>
            <template v-if="type === 'oa_payment'" slot-scope="scope">
              <el-form-item :prop="'types.' + scope.$index + '.actualPaymentMoney'" :rules="typesRules.actualPaymentMoney">
                <Money v-model="scope.row.actualPaymentMoney" style="width: 80%;" :placeholder="$t('原金额为') + moneyFormat(scope.row.amount)+ $t('元')" />
                <el-tooltip class="item" :content="$t('载入原始金额')" placement="left">
                  <i class="el-icon-download" style="transform: rotate(90deg);font-size: 20px;margin-left: 10px;" @click="scope.row.actualPaymentMoney = scope.row.amount" />
                </el-tooltip>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column v-if="type !== 'oa_payment'" :label="$t('实际付款金额') + $t('金额单位')" align="center">
            <template v-if="type !== 'oa_payment'" slot="header" slot-scope="{}">
              <span>{{ $t('实际付款金额') }} {{ $t('金额单位') }}</span>
            </template>
            <template v-if="type !== 'oa_payment'" slot-scope="scope">
              <el-form-item :prop="'types.' + scope.$index + '.actualPaymentMoney'" :rules="typesRules.actualPaymentMoney">
                <Money v-model="scope.row.actualPaymentMoney" unit="w" style="width: 80%;" :placeholder="$t('原金额为') + moneyFormat(scope.row.amount, 'w')" />
                <el-tooltip class="item" :content="$t('载入原始金额') + $t('金额单位')" placement="left">
                  <i class="el-icon-download" style="transform: rotate(90deg);font-size: 20px;margin-left: 10px;" @click="scope.row.actualPaymentMoney = scope.row.amount" />
                </el-tooltip>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closePage">{{ $t("取消") }}</el-button>
      <el-button type="primary" @click="updatePayTimeSuccess">{{ $t("确定") }}</el-button>
    </div>
  </div>
</template>
<script>
import { getOaPayment } from '@/api/oa/payment/oaPayment'
import { getDealPayment } from '@/api/deal/payment/dealPayment'
import MainBodySelect from '@/components/MainBodySelect'
import { getFdSubjectList } from '@/api/fd/config/getTypeMain'
export default {
  components: {
    MainBodySelect
  },
  props: {
    dialogVisiblePayMoneyValue: {
      type: String,
      default: ''
    },
    dialogVisiblePayTimeValue: {
      type: String,
      default: ''
    },
    actTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    const moneyValidCustom = (rule, value, callback) => {
      if (value !== undefined && value !== '' && value !== null) {
        // 校验电话
        if (rule.field.includes('actualPaymentMoney')) {
          var moneyValid = parseInt(value)
          if (moneyValid <= 0) {
            callback(new Error(this.$t('付款金额不能为空并且不能小于 0 !')))
          }
        }
        callback()
      } else {
        callback(new Error(this.$t('必填信息')))
      }
    }
    return {
      form: {
        types: []
      },
      // 付款大类
      getFdSubjectList: [],
      type: '',
      // 遮罩层
      dialogVisiblePayLoading: false,
      // 主体
      rules: {},
      typesRules: {
        actualPaymentTime: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
        actualPaymentMoney: [{ required: true, validator: moneyValidCustom,	trigger: 'blur' }]
      }
    }
  },
  created() {
  },
  methods: {
    init(data, type) {
      this.dialogVisiblePayLoading = true
      // 付款大类
      getFdSubjectList('oa_payment').then(response => {
        // 国际化
        response.data.forEach(item => {
          item.label = this.$t(item.label)
          item.children.forEach(item2 => {
            item2.label = this.$t(item2.label)
          })
        })
        this.getFdSubjectList = response.data
        this.initData(data, type)
      })
    },
    initData(data, type) {
      this.type = type
      this.form.types = []
      this.dialogVisiblePayLoading = true
      if (type === 'oa_payment') {
        getOaPayment(data.id).then(response => {
          this.form = response.data
          // 费用类型
          for (let i = 0; i < this.form.types.length; i++) {
            const type = this.form.types[i]
            this.form.types[i].typeArray = [type.typeOne, type.typeTwo]
            this.payTypeChange(i)
          }
          this.dialogVisiblePayLoading = false
        })
      } else if (type === 'deal_payment') {
        getDealPayment(data.id).then(response => {
          this.form = response.data
          this.dialogVisiblePayLoading = false
        })
      } else {
        this.dialogVisiblePayLoading = false
      }
    },
    updatePayTimeSuccess() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.dialogVisiblePayLoading = true
          var types = []
          var data = { id: this.form.id }
          if (this.type === 'oa_payment') {
            if (this.form.types !== undefined && this.form.types.length > 0) {
              this.form.types.some(item => {
                types.push({
                  id: item.id,
                  investorId: item.investorId,
                  actualPaymentTime: item.actualPaymentTime,
                  actualPaymentMoney: item.actualPaymentMoney
                })
              })
              data.types = types
            }
          }
          if (this.type === 'deal_payment') {
            if (this.form.types !== undefined && this.form.types.length > 0) {
              this.form.types.some(item => {
                types.push({
                  id: item.id,
                  investorId: item.investorId,
                  actualPaymentTime: item.actualPaymentTime,
                  actualPaymentMoney: item.actualPaymentMoney
                })
              })
              data.types = types
            }
          }
          this.$emit('updatePayTimeSuccess', data)
        }
      })
    },
    closePage() {
      this.$parent.$parent.MaintainPaymentInforLoading = false
    },
    // 付款类型的onchang时间
    payTypeChange(value) {
      this.form.contractAssociated = undefined
      this.form.types[value].subjectType = ''
      let vals = this.form.types[value].typeArray
      this.getFdSubjectList.forEach(item => {
        if (vals === undefined) {
          var temp = []
          temp.push('-1')
          vals = temp
        }
        if (item.id === vals[0]) {
          this.form.types[value].subjectType = item.subjectType
          this.form.types[value].businessType = item.subjectType
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item {
   margin-bottom: 0px;
}
</style>
